<!--领航宣讲资源库-->
<template>
  <div class="navigatorPreach">
    <!--头部背景图-->
    <div class="navigatorPreach_header"></div>
    <div class="navigatorPreach_menu">
      <!--菜单tab-->
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane v-for="(item, index) in tabList" :key="index" :label="item.label" :name="item.name"></el-tab-pane>
        <component :is="tabList[active].component" :library-type-id="activeName" />
      </el-tabs>
      <div class="navigatorPreach-backstage">
        <el-button v-if="hasAdministrativeAuthority()" @click="backgroundManagement">后台管理</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import talentPool from "./components/talentPool";
import preachVideo from "./components/preachVideo";
import preachLessonPlan from "./components/preachLessonPlan";
import preachCase from "./components/preachCase";
import preachLiterature from "./components/preachLiterature";
import { ref, shallowRef, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();
const router = useRouter();
const route = useRoute();
const activeName = ref("talentPool"); // 菜单默认选中tab
const active = ref(0); // 菜单tab索引
const tabList = ref([
  {
    id: '0',
    label: "人才库",
    name: "talentPool",
    component: shallowRef(talentPool),
  },
  {
    id: '1',
    label: "视频库",
    name: "video",
    component: shallowRef(preachVideo),
  },
  {
    id: '2',
    label: "教案库",
    name: "lessonPlan",
    component: shallowRef(preachLessonPlan),
  },
  {
    id: '3',
    label: "案例库",
    name: "case",
    component: shallowRef(preachCase),
  },
  {
    id: '4',
    label: "文献库",
    name: "literature",
    component: shallowRef(preachLiterature),
  },
]); // 菜单tab列表
const roles = ref([]); // 角色权限列表
// 文献库权限列表(分管领导, 文献录入人)
const documentAuthority = ref(["LITERATURE_ENTERED_BY", "CITY_LEADER"]);
const tabName = route.query.tab; // 获取页签参数
// 后台管理根据权限展示
const administrativeAuthority = ref([
  "admin", // 超级管理员
  "CITY_DIRECTOR", // 分公司党办主任
  "PROVINCE_PARTY_OPERATOR", // 省公司党办经办人初审
  "PROVINCE_PARTY_LEADER", // 省公司党办负责人终审
  "CITY_ENTERED_BY", // 分公司录入人
  "LITERATURE_ENTERED_BY", // 文献录入人
  "CITY_LEADER", // 分管领导
]);

onMounted(() => {
  rolePermissions(); // 获取角色权限
  getTabList(); // 获取页签展示列表
})
/**
 * 获取页签列表
 */
const getTabList = () => {
  // 如果有tab参数，则根据tab参数跳转到对应的页签
  if(tabName) {
    const data = tabList.value.find(item => item.name === tabName);
    handleClick({ index: data.id, paneName: tabName });
    return;
  }
  // 如果没有tab参数，则默认展示人才库页面
  handleClick({ index: 0, paneName: "talentPool" });
}
/**
 * 角色权限
 */
const rolePermissions = () => {
  const { user, roles: rolesList } = userStore;
  const rolesFromUser = user?.roles.map(item => item.roleKey); // 获取角色权限
  const rolesSet = new Set([...rolesFromUser, ...rolesList]); // 合并并去重
  roles.value = Array.from(rolesSet);
};
/**
 * 后台管理权限控制
 */
const hasAdministrativeAuthority = () => {
  return hasAnyRole(administrativeAuthority.value);
}
/**
 * 角色列表中是否有管理角色权限
 * @param roleList 角色列表
 */
const hasAnyRole = (roleList) => {
  return roleList.some((item) => roles.value?.includes(item));
};
/**
 * 切换tab
 * @param tab 当前tab对象
 */
const handleClick = (tab) => {
  active.value = tab.index; // 菜单tab索引
  activeName.value = tab.paneName; // 菜单tab名称
};
/**
 * 跳转到资源库后台管理
 */
const backgroundManagement = () => {
  // 默认跳转至人才库
  const path = "/talentPool/index";
  const routerData = router.resolve({
    path, // 跳转的路径(后台管理系统)
  });
  window.open(routerData.href, "_blank");
};
</script>

<style scoped lang="less">
//全局样式
.navigatorPreach {
  font-family: MicrosoftYaHei-Bold;
  width: 100%;
  background-color: #fafafa;
  height: 100%;
  align-items: center;
  // 头部背景图
  .navigatorPreach_header {
    background: url("../../assets/images/banner@2x.png") center no-repeat;
    background-size: cover;
    background-position-y: top;
    width: 100%;
    aspect-ratio: 1920/250;
  }
  // 内容区域
  :deep(.navigatorPreach_menu) {
    position: relative;
    // 菜单样式
    .el-tabs__header {
      background-color: #ffffff;
      .el-tabs__nav-wrap {
        height: 64px;
        padding: 0 15%;
        border-bottom: 1px solid #fafafa;
        box-shadow: -10px -8px 15px 8px rgba(0, 0, 0, 0.2);
        &::after {
          background-color: #fafafa;
        }
        .el-tabs__nav {
          height: 64px;
          align-items: center;
        }
        // 菜单项默认样式
        .el-tabs__item {
          font-size: 20px;
          color: #333333;
          font-weight: 500;
          padding-right: 30%;
        }
        // 菜单项点击后样式
        .el-tabs__item.is-active {
          font-weight: 800;
        }
        // 菜单项下划线样式
        .el-tabs__active-bar {
          height: 4px;
          background-color: #dd1d19;
        }
      }
    }
    // 内容区域
    .el-tabs__content {
      background-color: #fafafa;
      padding: 1% 15% 2%;
    }
    // 后台管理按钮
    .navigatorPreach-backstage {
      position: absolute;
      top: 16px;
      right: 15%;
      .el-button {
        background: #dd1d19;
        border-radius: 4px;
        width: 112px;
        height: 36px;
        span {
          font-size: 20px;
          color: #FFFFFF;
          text-align: center;
          font-weight: 700;
        }
      }
    }
  }
}
</style>
